<!--连载 -->
<template>
	<div id="columns">
		<div class="top">
			<van-icon @click='back' class-prefix="iconfont" name="fanhui1" size="20" color="#000000"/>
			<van-cell title="连载" is-link  value="了解更多">
				<template default>
					<div @click="columnsMore">了解更多</div>
				</template>
			</van-cell>
		</div>
		
		<!-- 轮播图 -->
		<Swipercolumns></Swipercolumns>
		
		<!-- 连载分类 -->
		<div class="columnsSort">
			<van-cell title="连载分类" size="large" />
			<van-grid :gutter="10" :column-num="3">
			  <van-grid-item v-for="item in this.$store.state.SwiperColumns.kinds" :key="item.name" :text="item.name" />
			</van-grid>
		</div>
	</div>
</template>

<script>
	import Swipercolumns from "@/components/SwiperColumns.vue"
	
	export default{
		components:{
			Swipercolumns
		},
		methods:{
			// 跳转更多页面
			columnsMore(){
				this.$router.push('/ColumnsMore')
			},
			
			back(){
				this.$router.back()
			}
		}
	}
</script>

<style lang="scss">
	#columns{
		background-color: #F8F9F9;
		
		.top{
			margin-bottom: 1.25rem;
			display: flex;
			flex-direction: row;
			align-items: center;
			box-shadow: 0 0.0625rem 0.25rem #dadada;
			background-color: #F8F9F9;
			position: sticky;
			top: 0;
			z-index: 8;
			
			.iconfont-fanhui1{
				margin-left: 0.9375rem;
			}
			
			.van-cell{
				background-color: #F8F9F9;
			}
			.van-cell::after{
				display: none;
			}
			.van-cell__title{
				font-size: 1.25rem;
				font-weight: bold;
			}
			.van-cell__value,.van-cell__right-icon{
				color: #389eac;
			}
		}
		
		// 连载分类
		.columnsSort{
			margin-top: 0.625rem;
			padding-bottom: 3.125rem;
			
			.van-cell{
				background-color: #F8F9F9;
			}
			.van-cell__title{
				font-size: 0.9375rem;
				font-weight: bold;
			}
			
			.van-grid-item__content{
				padding: 0.5rem 0.5rem;
				background-color: #eee;
			}
		}
		
	}
</style>